<template>
  <view class="rune-combination-preview">
    <view class="preview-header">
      <text class="preview-title">符文组合预览</text>
      <text class="preview-subtitle">拖拽符文到插槽中查看可能的符文之语</text>
    </view>
    
    <view class="rune-slots">
      <view 
        v-for="(slot, index) in slots" 
        :key="index"
        class="rune-slot"
        :class="{ filled: slot.rune }"
        @drop="onDrop($event, index)"
        @dragover.prevent
      >
        <view v-if="slot.rune" class="slot-rune">
          <image :src="getRuneImagePath(slot.rune)" mode="aspectFit" />
          <text class="slot-rune-name">{{ slot.rune }}</text>
          <view class="remove-rune" @click="removeRune(index)">×</view>
        </view>
        <text v-else class="slot-placeholder">拖放符文</text>
      </view>
    </view>
    
    <view class="matching-runewords" v-if="matchingRunewords.length > 0">
      <text class="matching-title">匹配的符文之语</text>
      <view 
        v-for="(runeword, index) in matchingRunewords" 
        :key="index"
        class="matching-runeword"
        @click="$emit('select-runeword', runeword)"
      >
        <text class="matching-name">{{ runeword.name }}</text>
        <text class="matching-type">{{ runeword.type }}</text>
      </view>
    </view>
    
    <view class="no-matches" v-else-if="hasRunes">
      <text>没有匹配的符文之语</text>
    </view>
    
    <view class="rune-palette">
      <view 
        v-for="(rune, index) in runes" 
        :key="index"
        class="palette-rune"
        draggable="true"
        @dragstart="onDragStart($event, rune.name)"
      >
        <image :src="getRuneImagePath(rune.name)" mode="aspectFit" />
        <text class="palette-rune-name">{{ rune.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    runes: {
      type: Array,
      required: true
    },
    runewords: {
      type: Array,
      required: true
    }
  },
  
  data() {
    return {
      slots: [
        { rune: null },
        { rune: null },
        { rune: null },
        { rune: null },
        { rune: null },
        { rune: null }
      ],
      draggedRune: null
    };
  },
  
  computed: {
    currentRuneCombination() {
      return this.slots
        .filter(slot => slot.rune)
        .map(slot => slot.rune);
    },
    
    hasRunes() {
      return this.currentRuneCombination.length > 0;
    },
    
    matchingRunewords() {
      if (!this.hasRunes) return [];
      
      return this.runewords.filter(runeword => {
        // 检查当前组合是否是符文之语的子集
        const combination = [...this.currentRuneCombination];
        
        // 如果组合中的符文数量大于符文之语所需的符文数量，则不匹配
        if (combination.length > runeword.runes.length) {
          return false;
        }
        
        // 检查每个符文是否按顺序出现在符文之语中
        for (let i = 0; i < combination.length; i++) {
          if (combination[i] !== runeword.runes[i]) {
            return false;
          }
        }
        
        return true;
      });
    }
  },
  
  methods: {
    getRuneImagePath(runeName) {
      const name = runeName.toLowerCase();
      return `/static/images/runes/${name}.svg`;
    },
    
    onDragStart(event, runeName) {
      this.draggedRune = runeName;
      event.dataTransfer.setData('text/plain', runeName);
    },
    
    onDrop(event, slotIndex) {
      event.preventDefault();
      if (this.draggedRune) {
        this.slots[slotIndex].rune = this.draggedRune;
        this.draggedRune = null;
      }
    },
    
    removeRune(slotIndex) {
      this.slots[slotIndex].rune = null;
    },
    
    clearSlots() {
      this.slots.forEach(slot => {
        slot.rune = null;
      });
    }
  }
};
</script>

<style lang="scss">
@import '@/common/d2r-theme.scss';
.rune-combination-preview {
  margin-top: 30px;
  padding: 20px;
  background-color: $d2r-bg-medium;
  border: 1px solid $d2r-border;
  border-radius: 4px;
  
  .preview-header {
    margin-bottom: 20px;
    
    .preview-title {
      font-size: 18px;
      color: $d2r-gold;
      font-weight: bold;
      display: block;
    }
    
    .preview-subtitle {
      font-size: 14px;
      color: $d2r-text-secondary;
      margin-top: 5px;
      display: block;
    }
  }
  
  .rune-slots {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
    
    .rune-slot {
      width: 60px;
      height: 60px;
      margin: 5px;
      border: 2px dashed $d2r-border;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      
      &.filled {
        border-style: solid;
        border-color: $d2r-gold;
      }
      
      .slot-placeholder {
        font-size: 12px;
        color: $d2r-text-secondary;
        text-align: center;
      }
      
      .slot-rune {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
        
        image {
          width: 40px;
          height: 40px;
          margin-top: 5px;
        }
        
        .slot-rune-name {
          font-size: 10px;
          color: $d2r-text;
        }
        
        .remove-rune {
          position: absolute;
          top: -8px;
          right: -8px;
          width: 16px;
          height: 16px;
          background-color: $d2r-red;
          color: white;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 12px;
          cursor: pointer;
        }
      }
    }
  }
  
  .matching-runewords {
    margin-bottom: 20px;
    
    .matching-title {
      font-size: 16px;
      color: $d2r-gold;
      margin-bottom: 10px;
      display: block;
    }
    
    .matching-runeword {
      display: flex;
      justify-content: space-between;
      padding: 10px;
      background-color: $d2r-bg-light;
      border: 1px solid $d2r-border;
      border-radius: 4px;
      margin-bottom: 5px;
      
      .matching-name {
        font-size: 14px;
        color: $d2r-gold;
      }
      
      .matching-type {
        font-size: 14px;
        color: $d2r-text-secondary;
      }
    }
  }
  
  .no-matches {
    text-align: center;
    padding: 15px;
    color: $d2r-text-secondary;
    background-color: $d2r-bg-light;
    border-radius: 4px;
    margin-bottom: 20px;
  }
  
  .rune-palette {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    .palette-rune {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 5px;
      cursor: grab;
      
      image {
        width: 40px;
        height: 40px;
        margin-bottom: 5px;
      }
      
      .palette-rune-name {
        font-size: 12px;
        color: $d2r-text;
      }
    }
  }
}
</style>